<script>
export default {
  name: 'StarLevelIndex',
  props: {
    currentRating: {
      type: Number,
      default: 0
    },
    showCancel: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      hoverRating: 0, // 鼠标悬停的评分
      internalRating: this.currentRating // 创建一个新的data属性保存评分值
    }
  },
  methods: {
    rate(rating) {
      // 用户点击星星时更新评分
      this.internalRating = rating
      // 向父组件传递当前评分
      this.$emit('updateCurrentRating', this.internalRating)
    },
    hover(rating) {
      // 鼠标悬停星星时更新悬停评分
      this.hoverRating = rating
    },
    resetHover() {
      // 鼠标离开星星时重置悬停评分
      // this.hoverRating = 0
    },
    cancel() {
      this.internalRating = 0
      // 向父组件传递当前评分
      this.$emit('updateCurrentRating', this.internalRating)
    }
  }
}
</script>

<template>
  <div class="i-item">
    <div
      v-for="(star, index) in 5"
      :key="index"
      @click="rate(index + 1)"
      @mouseover="hover(index + 1)"
      @mouseleave="resetHover"
    >
      <i
        class="el-icon-star-off i-color"
        :class="{'el-icon-star-on i-on': index < currentRating}"
      />
    </div>
    <el-button v-if="showCancel" @click="cancel">取 消</el-button>
  </div>
</template>

<style scoped lang="scss">
.i-color {
  color: red;
  font-size: 1.5rem;
}

.i-on {
  font-size: 2rem;
}

.i-item {
  display: flex;
  align-items: center;

}
</style>
